<template>
  <div class="traces-wraper">
    <el-table :data="formatIndexData" :header-cell-style="tableHeaderColor" :span-method="cellMerge1"
      style="width: 100%;" border>
      <el-table-column label="痕迹摘要" prop="abstract" min-width="150" align="left">
        <template slot-scope="scope">
          <div class="markname">
            {{ scope.row.abstract}}
            <el-button class="sendbtn" type="text" icon="el-icon-share" @click="showCommentDialog(scope.row.taskId)">记录
            </el-button>
            <el-button class="sendbtn" type="text" icon="el-icon-edit" style="color:#F56C6C;"
              @click="handComment(scope.row.taskId, scope.row.abstract)">点评</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="痕迹材料" min-width="300" align="left">
        <template slot-scope="scope">
          <div class="fileinfo">

            <image-type v-if="scope.row.fileType" :fileType="scope.row.fileType" class="filename">
              <!-- {{ scope.row.file | filenameFilter }} -->
              {{ scope.row.file}}
              <div class="toolBox">
                <el-button type="text" @click="previewFile(scope.row)">在线查看</el-button>
              </div>
            </image-type>
          </div>
          <!-- <img :src="require('@/assets/images/'+ fileFilter(scope.row.fileType) +'.png')" alt="" class="file-img">{{ scope.row.file }} -->
        </template>
      </el-table-column>
      <el-table-column label="上传时间" min-width="120">
        <template slot-scope="scope">{{ parseTime(scope.row.time) }}</template>
      </el-table-column>
      <el-table-column label="上传用户" prop="user" width=""></el-table-column>
      <el-table-column label="操作" min-width="60" fixed="right">
        <template slot-scope="{ row }">
          <el-popconfirm
            title="确定要删除此痕迹吗？"
            @confirm="handDeleteTraces(row.taskId)"
          >
            <el-button slot="reference" :disabled="row.userId != id" size="text" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 点评记录列表 -->
    <el-dialog title="痕迹资料点评记录" :visible.sync="dialogCommnentVisible" width="60%" append-to-body>
      <el-table :data="markComents" size="small" stripe style="width: 100%;">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="点评内容" prop="content" min-width="200" align="left"></el-table-column>
        <el-table-column label="点评分数(分)" prop="score" min-width="100" align="left">
          <template slot-scope="{ row }">
            <span style="color: red;">{{ row.score}}</span>
          </template>
        </el-table-column>
        <el-table-column label="点评人" prop="owner" min-width="100" align="left"></el-table-column>
        <el-table-column label="点评时间" prop="abstract" min-width="150" align="left">
          <template slot-scope="{ row }">
            {{ parseTime(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="left">
          <template slot-scope="{ row }">
            <el-button type="text" v-if="userId == row.owner_id ? true : false" @click="handleDeletPonit(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 填写点评 -->
    <el-dialog title="历史记录" :visible.sync="dialogFormVisible" append-to-body>
      <div v-if="abstract" class="desc" style="padding-bottom: 10px;">
        正在点评痕迹 》{{ abstract }}
      </div>
      <el-form :model="comment">
        <el-form-item label="点评内容" style="margin: 15px 0 20px 0">
          <el-input type="textarea" :rows="3" v-model="comment.content" autocomplete="off" style="width: 86%;">
          </el-input>
        </el-form-item>
        <el-form-item label="点评分数:">
          <el-input-number controls-position="right" :min="0" :max="100" v-model="comment.score" style="width: 86%;">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="postComment">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    parseTime,
    getFileType,
    previewFile
  } from "@/utils/index";
  import {
    deleteMarkInfo,
    getMarkInfo,
    postMarkComent,
    getMarkComents,
    deleteTrace,
    deleteTracePonit
  } from "@/api/work.js";
  import ImageType from '@/components/ImageType'
  export default {
    name: "traceList",
    components: {
      ImageType
    },
    computed: {
      ...mapGetters([
        'name',
        'id'
      ])
    },
    props: {
      markList: {
        type: Array,
        require: true
      },
      initIndexId:null
    },
    watch: {
      markList: {
        handler(result, oldName) {
          this.spanArr = [],
          this.pos = 0,
          this.getSpanArr(result)
          this.formatIndexData = result
        },
        immediate: true
      }
    },
    data() {
      return {
        spanArr: [],
        pos: 0,
        dialogFormVisible: false,
        dialogCommnentVisible: false,
        comment: {}, // 点评信息
        abstract: '',
        markId: null,
        markComents: [],
        formatIndexData: [],
        userId:null,
      };
    },
    created() {
      // this.fetchMarkInfo()
      this.userId = this.$store.state.user.id
    },
    methods: {
      parseTime,
      previewFile,
      // 删除痕迹
      async handDeleteTraces(id) {
        await deleteMarkInfo(id)
        this.formatIndexData = this.formatIndexData.filter(item => item.taskId !== id)
        this.$emit('onFinish')
      },
      // 打开点评记录对话框
      showCommentDialog(id) {
        this.dialogCommnentVisible = true
        getMarkComents(id).then(
          res => {
            this.markComents = res.data.results
          }
        )
      },
      // 点评窗口
      handComment(id, val) {
        this.dialogFormVisible = true
        this.abstract = val
        this.markId = id
      },
      postComment() {
        let {
          content,
          score
        } = this.comment
        if (!content || !score) {
          this.$message.warning('请填写点评内容和分数！')
          return
        }
        const param = {
          content: content,
          score: score,
          mark: this.markId,
          owner: this.id
        }
        postMarkComent(param).then(res => {
          if (res && res.data) {
            this.$message.success('痕迹点评成功')
            this.dialogFormVisible = false
          }
        })

      },
      getSpanArr(data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].abstract === data[i - 1].abstract) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      },
      cellMerge1({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0 || columnIndex === 3) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },

      cellMerge({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        const span = column["property"] + "-span";
        if (row[span]) {
          return row[span];
        }
      },
      mergeTableRow(data, merge) {
        if (!merge || merge.length === 0) {
          return data;
        }
        merge.forEach(m => {
          const mList = {};
          data = data.map((v, index) => {
            const rowVal = v[m];
            if (mList[rowVal] && mList[rowVal].newIndex === index) {
              mList[rowVal]["num"]++;
              mList[rowVal]["newIndex"]++;
              data[mList[rowVal]["index"]][m + "-span"].rowspan++;
              v[m + "-span"] = {
                rowspan: 0,
                colspan: 0
              };
            } else {
              mList[rowVal] = {
                num: 1,
                index: index,
                newIndex: index + 1
              };
              v[m + "-span"] = {
                rowspan: 1,
                colspan: 1
              };
            }
            return v;
          });
        });
        return data;
      },
      // 修改table header的背景色
      tableHeaderColor({
        row,
        rowIndex
      }) {
        return 'background-color: #f5f5f5;color: #666;'
      },
      //删除痕迹
      async handleDelet(id){
        const result = await deleteTrace(id)
        if(result){
          this.$message.success(`删除痕迹成功`);
        }
        this.$emit('fetchMark',this.initIndexId)
      },
      async handleDeletPonit(row){
        const result = await deleteTracePonit(row.id)
        if(result){
          this.$message.success(`删除点评记录成功`);
        }
        getMarkComents(row.mark).then(
          res => {
            this.markComents = res.data.results
          }
        )
      }
    }
  };

</script>
<style lang="scss">
  .traces-wraper {
    .markname {
      .sendbtn {
        display: none;
      }

      &:hover {
        .sendbtn {
          display: inline-block;
        }
      }
    }

    .fileinfo {

      .toolBox {
        color: #6f6f6f;
        margin-left: 10px;
        display: none;
      }

      &:hover {
        .toolBox {
          display: inline-block;
        }
      }
    }

    .el-button--text {
      padding: 0;
    }
  }

  .el-dialog__body {
    padding: 10px 20px;
  }

</style>
